/**
 * render 函数除了初始化之外，再次触发一定是，setState 导致 state 发生变化，或者 props 发生变化
 *
 * 首先要知道的是，父组件render，子组件一定会render
 *    更根本的原因是，子组件的 props 变化了
 *
 * 阻止组件无用的 Render ,可以让组件继承 React.PureComponent 组件
 *
 * PureComponent 的原理
 *    内部改变了比较了 新旧 state \ 新旧 props 的变化的方式
 *
 *    默认情况下比较方式是全等比较
 *      (oldState !== newState || oldProps !== newProps)
 *      满足上面的条件就表示数据发生了变化，需要 re-render
 *
 *    换成PureComponent之后
 *      不在整个对象直接比较，而是浅层比较对象中的属性
 *
 *      oldProps = {
 *        name: '张三'
 *      }
 *      newProps = {
 *        name: '张三~'
 *      }
 *      newProps = {
 *        name: '张三~'
 *      }
 *
 */

// @ts-nocheck
import React from "react";

class Hello extends React.PureComponent {
  render(): React.ReactNode {
    console.log("Hello Render");
    return (
      <div>
        <button>Hello</button>
      </div>
    );
  }
}

class App extends React.Component {
  // constructor(props: any) {
  //   super(props);

  //   this.fn1 = this.fn1.bind(this);
  // }

  state = {
    name: "张三",
    age: 18,
  };

  handleClick = () => {
    this.setState((state) => ({ name: state.name + "~" }));
  };

  handleClick2 = () => {
    this.setState((state) => ({ age: state.age + 1 }));
  };

  fn1 = () => {
    console.log("fn1");
  };

  render(): React.ReactNode {
    console.log("App Render");
    return (
      <div>
        <h1>
          App {this.state.name} {this.state.age}
        </h1>
        <button onClick={this.handleClick}>点我，修改姓名</button>
        <button onClick={this.handleClick2}>点我，修改年龄</button>
        <hr />
        <Hello name={this.state.name} onChange={this.fn1} />
      </div>
    );
  }
}

export default App;

// 1：
//   {
//     name: '张三',
//     onChange: 函数
//   }

// 2：
//   {
//     name: '张三',
//     onChange: 函数
//   }
